<template>
  <div class="fixed top-0 left-0 bg-base-100 w-full h-full z-40 ">
      <!--顶部栏-->
      <div class="fixed z-50 flex justify-center items-center w-full h-[10vh] bg-primary  text-md">
        <div class="w-2/12 md:w-1/12 flex justify-center">
          <div @click="router.go(-1)" class="">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75"/>
            </svg>
          </div>
        </div>
        <div class="w-10/12 md:w-10/12 flex justify-start pl-2">
          我喜欢的音乐
        </div>
      </div>
      <!--内容-->
      <div class="overflow-y-auto w-full h-[90vh] fixed top-[10vh] left-0">
        <div class="flex absolute flex-col top-0 justify-center items-center w-full px-5 py-6 ">
          <!--头部展示区-->
          <div class="flex flex-row justify-center items-start w-full rounded-2xl bg-base-100 shadow-2xl">
            <div class="w-2/6 md:w-1/6 h-full flex justify-center items-center">
              <svg class="fill-primary w-full h-full " xmlns="http://www.w3.org/2000/svg" fill="none"
                   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/>
              </svg>
            </div>
            <div class="w-4/6 md:w-5/6 h-full flex flex-col justify-start items-start pl-2">
              <div class="h-1/6 w-full flex justify-start items-center text-2xl">我喜欢的音乐</div>
              <div class="h-5/6 w-full flex justify-start items-start text-md pt-2">
                <div class="text-base-content/50 rounded-full flex justify-center items-center cursor-pointer gap-2">
                  <img v-if="hook_getUser()?.['avatar'] !=null"  :srcset="hook_getUser()['avatar']"  class="avatar w-12 h-12 object-cover rounded-full">
                  <div v-else class="flex justify-center text-2xl items-center avatar btn btn-primary w-12 h-12 object-cover rounded-full mx-2">{{ hook_getUser()?.['username'].substring(0,1).toUpperCase() }}</div>
                  {{ hook_getUser()['username'] }}
                </div>
              </div>
            </div>
          </div>
          <!--歌曲列表-->
          <div class="flex flex-col rounded-2xl bg-base-100 border border-black/20 shadow-2xl justify-center items-center w-full mt-8">
            <div class="h-16 w-full flex flex-row justify-center items-center px-5 py-6">
              <div class="w-1/12 flex justify-center items-center">
                <svg @click="hook_addSongsToPlayerList(songs,true,true)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                     stroke="currentColor"
                      class="fill-primary w-12 h-12 hover:fill-secondary">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                  <path stroke-linecap="round" stroke-linejoin="round"
                        d="M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z"/>
                </svg>
              </div>
              <div class="w-8/12 md:w-10/12 flex justify-start items-center ml-2">
                播放全部
                <div class="text-xs text-base-content/50 ml-1">
                  ({{ songs?.length }})
                </div>
              </div>
              <div class="w-2/12 md:w-1/12  flex justify-center items-center btn-ghost rounded-full">
              </div>
              <div @click="hook_addSongsToPlayerList(songs)"
                   class="w-2/12 md:w-1/12  flex justify-center items-center btn-ghost rounded-full">
                <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                     stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round"
                        d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25"/>
                </svg>
              </div>
            </div>
            <div v-if="songs != null" class="w-full flex flex-col justify-center items-center">
              <song-bar @deleteSongBar="i => {deleteSongBar(i)}"
                        :class="[{'rounded-b-2xl': songs.length==index+1} ,{'border-b': songs.length!=index+1} , {'border-t': index==0} ,'border-black/20 px-2']"
                        v-for="(song,index) in songs"
                        :song="song"
                        :index="index"
                        :key="song.id"
                        :is-playlist="false">
              </song-bar>
            </div>
            <div v-else class="w-full flex flex-col justify-center items-center px-5 py-6">
              暂无歌曲
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import router from "../plugins/router.ts";
import {hook_getFavoriteByUserId, hook_getUser} from "../hook/UserHook.ts";
import SongBar from "../components/SongBar.vue";
import {hook_findSongById} from "../hook/SongHook.ts";
import {onBeforeMount, ref} from "vue";
import {hook_findFavoriteSongByUserId} from "../hook/FavoriteHook.ts";
import {indexOf} from "lodash";
import {hook_addSongsToPlayerList} from "../hook/SongPlayerHook.ts";

let songs = ref()
let favorite = ref()

onBeforeMount( () => {
  favorite.value = JSON.parse(sessionStorage.getItem("favorite"));
  updateData()
})

function deleteSongBar(index) {
  _.pullAt(songs.value, index);
  updateData();
}

async function updateData() {
  songs.value = await hook_findFavoriteSongByUserId(hook_getUser().id)
}

</script>

<style scoped>

</style>